<template>
  <!-- 加工工艺设置 -->
  <div class="processingTechnology">
    <div style="margin: 20px 0;">
      <el-button type="primary" @click="newlyBuild">新建</el-button>
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="日期" width="120" align="center">
        <template slot-scope="scope">
          <el-input v-if="scope.row.editTable" v-model="scope.row.date" placeholder="请输入内容"></el-input>
          <span v-else>{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120" align="center">
        <template slot-scope="scope">
          <el-input v-if="scope.row.editTable" v-model="scope.row.name" placeholder="请输入内容"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <el-input v-if="scope.row.editTable" v-model="scope.row.address" placeholder="请输入内容"></el-input>
          <span v-else>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="状态" align="center">
        <template slot-scope="scope">
          <el-input v-if="scope.row.editTable" v-model="scope.row.value" placeholder="请输入内容"></el-input>
          <span v-else>{{ scope.row.value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template v-slot="scope">
          <el-button size="mini" type="text" @click="editTable(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="deleteTable(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="submitForm">
      <el-button type="primary" @click="preservation">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProcessingTechnology",
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
          editTable: false
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
          editTable: false
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
          editTable: false
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
          editTable: false
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1',
          editTable: false
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1',
          editTable: false
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1',
          editTable: false
        },
      ],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    newlyBuild() {
      console.log('新建')
      this.tableData.push(
        {
          date: "",
          name: "",
          address: "",
          value: '',
          editTable: true
        }
      )
    },
    deleteTable(val) {
      console.log(val, '删除')
    },
    resetPassword(val) {
      console.log(val)
    },
    editTable(val) {
      console.log(val)
      val.editTable = !val.editTable
    },
    preservation() {
      this.tableData.map(item => item.editTable = false)
      console.log(this.tableData)
    }
  },
};
</script>

<style scoped lang="scss"></style>
